<div class="container-fluid">

  <!-- 🆕 Feature Selection Sidebar -->
  <app-sidebar (featureChanged)="onFeatureChange($event)"></app-sidebar>

  <!-- 左侧：题目描述 -->
  <div class="left-panel" #problemContainer>
    <app-feature-panel [activeFeature]="activeFeature" [userCode]="userCode"></app-feature-panel>
  </div>

  <!-- 垂直分割条 -->
  <div class="vertical-resizer" (mousedown)="startVerticalResize($event)"></div>

  <!-- 右侧：代码编辑和输出 -->
  <div class="right-panel" #codeContainer>
    <div class="code-editor-container card shadow-sm" #codeEditorContainer>

      <!-- 顶部标题栏（无 margin） -->
      <div class="editor-header d-flex align-items-center justify-content-between px-3 py-2" style="background-color: #e9ecef;">
        <h5 class="mb-0">代码</h5>

        <!-- 语言选择器（无 margin） -->
        <div class="form-group d-flex align-items-center">
          <label for="languageSelect" class="form-label me-2 small" style="margin: 0;">语言:</label>
          <select
            class="form-select form-select-sm"
            id="languageSelect"
            [(ngModel)]="selectedLanguage"
            (change)="onLanguageChange($event)"
            style="width: auto; margin: 0;"
          >
            <option *ngFor="let lang of languages" [value]="lang">{{ lang }}</option>
          </select>
        </div>
      </div>

      <div class="editor" #codeEditor></div>


    </div>

    <!-- 水平分割条 -->
    <div class="horizontal-resizer" (mousedown)="startHorizontalResize($event)"></div>

    <!-- 代码输出 -->
    <div class="code-output" #codeOutputContainer>
      <!-- 头部操作栏 -->
      <div class="output-header">
        <!-- 左侧选项卡 -->
        <div class="tabs">
          <button
            *ngFor="let tab of tabs"
            [class.active]="activeTab === tab.id"
            (click)="switchTab(tab.id)"
          >
            {{ tab.label }}
          </button>
        </div>

        <!-- 右侧运行按钮 -->
        <div class="run-buttons">
          <button
            class="run-button"
            (click)="runSampleTests(); activeTab = 'result'"
            [disabled]="isRunning"
          >
            {{ isRunning ? '运行中...' : '运行示例' }}
          </button>
          <button
            class="run-button debug-button"
            (click)="startDebug()"
            [disabled]="isRunning || isDebugging"
            title="启动调试 (F5)"
          >
            🐛 {{ isDebugging ? '调试中...' : '调试' }}
          </button>
          <button
            class="run-button stop-debug-button"
            (click)="stopDebug()"
            [disabled]="!isDebugging"
            title="停止调试 (Shift+F5)"
            *ngIf="isDebugging"
          >
            ⏹️ 停止调试
          </button>
          <button
            class="run-button"
            (click)="submit(); activeTab = 'result'"
            [disabled]="isRunning"
          >
            {{ isRunning ? '运行中...' : '提交代码' }}
          </button>
        </div>
      </div>

      <!-- 内容展示区 -->
      <div class="output-content">
        <!-- 测试用例 -->
        <div *ngIf="activeTab === 'cases'" class="test-cases">
          <div class="custom-input-section">
            <h6>自定义输入</h6>
            <textarea
              [(ngModel)]="customInput"
              placeholder="输入测试用例..."
              rows="4"
              class="form-control mb-2"
            ></textarea>
            <button
              class="btn btn-primary btn-sm"
              (click)="runCustomInput(); activeTab = 'result'"
              [disabled]="isRunning"
            >
              {{ isRunning ? '运行中...' : '运行' }}
            </button>
          </div>

          <div class="sample-cases mt-4">
            <h6>示例测试用例</h6>
            <div
              *ngFor="let case of testCases"
              class="case-item"
              [class.active]="activeCase === case.id"
              (click)="activeCase = case.id"
            >
              <div class="case-title">用例 {{ case.id }}</div>
              <div class="case-input">输入：{{ case.input }}</div>
            </div>
          </div>
        </div>

        <!-- 测试结果 -->
        <div *ngIf="activeTab === 'result'" class="test-result">
          <div *ngIf="testResults && testResults.length > 0" class="test-results-list">
            <div *ngFor="let result of testResults" class="test-result-item">
              <div class="result-header">
                <span class="result-status" [class.success]="result.status === 'SUCCESS'">
                  {{ result.status === 'SUCCESS' ? '通过' : '失败' }}
                </span>
                <span class="result-time">运行时间: {{ result.executionTime }}ms</span>
              </div>
              <pre [class.success]="result.status === 'SUCCESS'">
                {{ result.status === 'SUCCESS' ? result.output : result.error }}
              </pre>
            </div>
          </div>
          <div *ngIf="!testResults || testResults.length === 0" class="single-test-result">
            <div class="result-header">
              <span class="result-status" [class.success]="output.success">
                {{ output.success ? '成功' : '失败' }}
              </span>
            </div>
            <pre [class.success]="output.success">
              {{ output.text }}
            </pre>
          </div>
        </div>
      </div>

      <!-- 房间创建/加入 -->
      <div *ngIf="activeTab === 'chat'" class="room-actions">
        <h3>房间操作</h3>
        <input [(ngModel)]="roomId" placeholder="请输入6位房间号" maxlength="6" />
        <div class="room-buttons">
          <button (click)="createRoom()">创建房间</button>
          <button (click)="joinRoom()">加入房间</button>
        </div>
        <div *ngIf="roomMessage" class="room-message">{{ roomMessage }}</div>
      </div>
    </div>
  </div>

  <!-- ✅ 添加聊天组件（浮动右下角） -->
  <app-chat></app-chat>

  <!-- 🆕 添加调试器面板 -->
  <app-debugger-panel
    [visible]="debuggerPanelVisible"
    (closeRequested)="onDebuggerPanelClose()">
  </app-debugger-panel>
</div>
